<!-- 付款 -->
<template>
  <div class="content">
    <web-header></web-header>
    <div class="form">
      <div class="createAccount">{{$t('lan.isOrder')}}</div>
      <div class="createAccount">{{$t('lan.accurate')}}</div>
    </div>
    <div class="form">
      <div class="createAccount">{{$t('lan.productConfirmation')}}</div>
      <div class="product" v-for="i in detail.orderItemBOList" :key="i.id">
        <el-row>
          <el-col :span="5">
            <img v-if="i.picUrl" :src="i.picUrl" width="180" height="180" alt="">
            <img v-else src="@/assets/images/1481161992.jpg" width="180" height="180" alt="">
          </el-col>
          <el-col :span="18">
            <el-col :span="24">
              <div class="lineHeight32 productDetail">{{i.categoryName}}</div>
            </el-col>
            <el-col>
              <div class="lineHeight32 productDetail">
                <el-col :span="8">
                  <span style="color:#7B7B7B">{{$t('lan.auxiliaryNum')}}：</span>{{i.subCategoryTotalCount}}
                </el-col>
                <el-col :span="8">
                  <span style="color:#7B7B7B">{{$t('lan.totalNumDoors')}}：</span>{{i.doorTotalCount}}
                </el-col>
                <el-col :span="8">
                  <span style="color:#7B7B7B">{{$t('lan.system')}}：</span>{{i.operationCode}}
                  {{i.serverFlag === '1'?$t('lan.serverRequired'):$t('lan.noServerRequired')}}
                </el-col>
              </div>
            </el-col>
            <el-col>
              <div class="lineHeight32 productDetail">
                <el-col :span="8">
                  <span style="color:#7B7B7B">{{$t('lan.doorColor')}}：</span>{{i.colorValue?i.colorValue:''}}
                  <span :class="i.deviceColor!='11'?'colorValue':''" :style="{background:i.colorValue?'':formatColor(i.deviceColor)}"></span>
                </el-col>
                <el-col :span="8">
                  <span style="color:#7B7B7B">{{$t('lan.cabinetColor')}}：</span>{{i.cabinetColorValue?i.cabinetColorValue:''}}
                  <span :class="i.cabinetColor!='11'?'colorValue':''" :style="{background:i.cabinetColorValue?'':formatColor(i.cabinetColor)}"></span>
                </el-col>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="form">
      <div class="address">
        <el-row :gutter="60">
          <el-col :span="4">
            <div class="createAccount">{{$t('lan.details')}}</div>
          </el-col>
          <el-col :span="12">
            <div class="createAccount">{{$t('lan.address')}}</div>
            <div style="padding:10px 0px">
              <span style="color:#7B7B7B">{{$t('lan.Address')}}：</span>
              <span>{{detail.address}}</span>
            </div>

          </el-col>
          <el-col :span="8">
            <div class="createAccount">{{$t('lan.contactInformation')}}</div>
            <div style="padding:10px 0px">
              <span style="color:#7B7B7B">{{$t('lan.email')}}：</span>
              <span>{{detail.email}}</span>
            </div>
            <div style="padding:10px 0px">
              <span style="color:#7B7B7B">{{$t('lan.phone')}}：</span>
              <span>{{detail.mobile}}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- <div class="form">
      <div class="address">
        <el-row :gutter="60">
          <el-col :span="4">
            <div class="createAccount">发票信息</div>
          </el-col>
          <el-col :span="10">
            <div class="createAccount">电子普通票</div>
            <el-input placeholder="输入开票地址"></el-input>
          </el-col>
        </el-row>
      </div>
    </div> -->
    <div class="form">
      <div class="address">
        <el-row :gutter="40">
          <el-col :span="3">
            <div class="createAccount">{{$t('lan.information')}}</div>
            <div class="invoice" v-for="i in payType" :key="i.id" @click="selected(i)" :class="i.id === invoiceType?'select':''">{{i.code}}</div>
          </el-col>
          <div v-if="invoiceType ==='2'">
            <el-col :span="9">
              <el-col :span="11">
                <el-upload name="uploadFile" class="avatar-uploader" :headers="tokenimg" :action="fileUpload" :on-remove="removeImg" :on-success="onSuccess" :before-upload="beforeUpload" :show-file-list="false">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
              <el-col :span="13">
                <div style="position: relative;">
                  <el-image class="avatar" v-if="formData.paymentUrl" :src="formData.paymentUrl" :preview-src-list="[formData.paymentUrl]"></el-image>
                  <span class="close" v-if="formData.paymentUrl" @click.stop="removeImg(formData.paymentUrl)"></span>
                </div>
              </el-col>
            </el-col>

            <el-col :span="12" style="color:#2c2c2c">
              <span class="text"><span style="color:#7B7B7B">Beneficiary’s Name：</span>YS LOCKER, LLC</span>
              <span class="text"><span style="color:#7B7B7B">Beneficiary’s address：</span>4710 Ontario Mills PKWY, Suite E, Ontario, CA 91764 USA</span>
              <span class="text"><span style="color:#7B7B7B">Bank Name: </span>BANK OF AMERICA </span>
              <span class="text"><span style="color:#7B7B7B">Bank Address: </span>3182-33500 YUCAIPA BLVD YUCAIPA CA 92300-2025 </span>
              <span class="text"><span style="color:#7B7B7B">Account No: </span>3250 6951 0232 </span>
              <span class="text"><span style="color:#7B7B7B">SWIFT CODE: </span>BOFAUS3N </span>
              <!-- <el-input :placeholder="$t('lan.pleaseName')" value="YS LOCKER, LLC " disabled size="small"></el-input>
              <el-input :placeholder="$t('lan.pleaseAddress')" value="4710 Ontario Mills PKWY, Suite E, Ontario, CA 91764  USA" disabled size="small"></el-input>
              <el-input :placeholder="$t('lan.pleaseBankName')" value="BANK OF AMERICA" disabled size="small"></el-input>
              <el-input :placeholder="$t('lan.pleaseBank')" value="3182-33500 YUCAIPA BLVD YUCAIPA CA 92300-2025" disabled size="small"></el-input>
              <el-input :placeholder="$t('lan.pleaseNum')" value="3250 6951 0232" disabled size="small"></el-input>
              <el-input :placeholder="$t('lan.pleaseBankCode')" value="BOFAUS3N" disabled size="small"></el-input> -->
            </el-col>
            <!-- <el-col :span="6">

            </el-col> -->
          </div>
          <div v-else>
            <el-col :span="5">
              <div class="pay">
                <img src="@/assets/images/alipay.png" width="35" height="35" alt="">
                <span>{{$t('lan.alipay')}}</span>
              </div>
              <div class="pay">
                <img src="@/assets/images/wxpay.png" width="35" height="35" alt="">
                <span>{{$t('lan.wxpay')}}</span>
              </div>
              <div class="pay">
                <img src="@/assets/images/paypal.png" width="35" height="35" alt="">
                <span>paypal</span>
              </div>

            </el-col>
            <el-col :span="6">
              <div class="prompt">{{$t('lan.development')}}</div>
            </el-col>
          </div>
        </el-row>
      </div>
    </div>
    <div class="totalAmt">
      <el-row>
        <el-col :span="14">
          <div>{{$t('lan.total')}}</div>
        </el-col>
        <el-col :span="10">
          <span class="font-w">$ {{detail.amt}}</span> <span>{{$t('lan.price')}}</span>
        </el-col>
      </el-row>
    </div>
    <el-row style="padding-bottom:15px;">
      <el-col :span="6" :offset="9">
        <el-button :style="{'background':'#ee781e','color':'#fff','width':'100%','height':'65px',borderRadius:'0px',fontSize:'18px'}" @click="saveOrderPayment" :loading="loading">{{$t('lan.orderNow')}}</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { orderPayment, orderDetail } from '../api'
import { colorList, payType } from '../common'
import { httpServer } from '../request'
import { Notification } from 'element-ui'
export default {
  data () {
    return {
      loading: false,
      invoiceType: '2',
      formData: {
        status: 2,
        sn: this.$route.query.sn,//姓名
        paymentUrl: null,//付款凭证
      },
      payType: payType,
      detail: {},
      fileUpload: httpServer + '/web/common/fileUpload',
      tokenimg: {
        token: localStorage.getItem("token")
      }, // 图片请求头
    }
  },
  methods: {
    selected (val) {
      if (val.id === this.invoiceType) return this.invoiceType = null
      this.invoiceType = val.id
    },
    formatColor (id) {
      for (let i of colorList) {
        if (id === i.id) return i.value
      }
    },
    async saveOrderPayment () {
      if (!this.formData.paymentUrl) {
        return Notification({ type: 'error', title: this.$t('lan.error'), message: this.$t('lan.uploadInformation') })
      }
      try {
        this.loading = true
        await orderPayment(this.formData)
        Notification({ type: 'success', title: this.$t('lan.success'), message: this.$t('lan.updateSuccess') })
        setTimeout(() => this.$router.push('/orderList'), 1000)
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
    async getOrderDetail () {
      this.detail = await orderDetail(this.$route.query.sn || '')
    },
    // 图片上传成功后，后台返回图片的路径
    onSuccess (res) {
      this.formData.paymentUrl = res.data;
      if (res.code == 200) {
        this.formData.paymentUrl = res.data;
        return Notification({ type: 'success', title: this.$t('lan.success'), message: this.$t('lan.uploadSuccess') })
      }
    },
    removeImg (row) {
      this.$confirm(this.$t('lan.delPayment'), this.$t('lan.prompt'), {
        confirmButtonText: this.$t('lan.confirm'),
        cancelButtonText: this.$t('lan.cancel'),
        type: "warning"
      }).then(async () => {
        this.formData.paymentUrl = null
      });
    },
    // 图片校验
    beforeUpload (file) {
      var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type);
      if (!testmsg) {
        return this.$message.error(this.$t('lan.uploadFormat'));
      }
    },
  },
  created () {
    this.getOrderDetail();
  }
}
</script>
<style scoped>
.invoice {
  margin: 0px 0px 20px;
  width: 80%;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  color: #555;
  cursor: pointer;
}
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader >>> .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  padding: 0px 10px;
}
.content {
  width: 1200px;
  margin: 0 auto;
  padding-top: 16px;
}
.createAccount {
  font-size: 18px;
  color: #2c2c2c;
  padding: 0px 0px 20px;
}
.form span {
  display: inline-block;
}
.form {
  margin-top: 20px;
  border-bottom: 1px solid #e5e5e5;
}
.lineHeight32 {
  line-height: 42px;
}
.lineHeight96 {
  line-height: 96px;
}
.productDetail {
  font-size: 16px;
  color: #2c2c2c;
}
.product {
  margin-bottom: 20px;
}
.num {
  width: 30%;
  line-height: 26px;
  padding: 3px;
  border-radius: 10px;
  background: #ccc;
  color: #555;
  text-align: center;
  margin-top: 30px;
}
.address {
  margin-bottom: 30px;
}
.totalAmt {
  margin: 30px 0px;
  height: 60px;
  line-height: 60px;
}
.totalAmt > div {
  font-size: 20px;
}
.totalAmt > div span {
  color: #ea5420;
  margin: 0px 5px;
}
.close {
  position: absolute;
  color: rgb(0, 0, 0);
  height: 18px;
  width: 18px;
  background: #ff4949;
  z-index: 999;
  border-radius: 10px;
  right: 2px;
  top: -8px;
  padding: 0px !important;
}
.close:before {
  content: "";
  position: absolute;
  border-top: 2px solid #fff;
  width: 12px;
  left: 3px;
  top: 8px;
}
.select {
  position: relative;
  box-shadow: 0px 2px 7px 0px rgba(85, 110, 97, 0.35);
  color: #ee781e;
  border-radius: 10px;
  border: 1px solid #ee781e;
}
.select:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border: 17px solid #ee781e;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-right-radius: 9px;
}
.select:after {
  content: "";
  width: 5px;
  height: 12px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
.pay {
  display: flex;
  align-items: center;
  padding: 4px;
  margin: 8px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  min-width: 180px;
  cursor: pointer;
}
.pay >>> span {
  margin-left: 10px;
  font-size: 16px;
  padding: 0px;
}
.prompt {
  color: red;
  font-size: 22px;
  width: 200px;
  text-align: center;
  line-height: 140px;
}
.address >>> .el-input {
  margin: 10px 0px;
}
.text {
  display: block !important;
  padding: 6px !important;
  line-height: 24px;
}
.text span {
  display: inline !important;
  color: #7a7a7a;
  padding: 6px !important;
}
</style>